<template>
    <div>
        <div class="top-panel">
            <el-card>
                <el-form :model="searchForm" label-width="70px" label-position="right">
                    <el-row>
                        <el-col :span="5">
                            <el-form-item label="用户名">
                                <el-input class="password-input" v-model="searchForm.nickNameFuzzy" clearable
                                    placeholder="支持模糊搜索" @keyup.enter.native="loadDataList"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="店铺名称">
                                <el-input class="password-input" v-model="searchForm.storeNameFuzzy" clearable
                                    placeholder="支持模糊搜索" @keyup.enter.native="loadDataList"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="姓名">
                                <el-input class="password-input" v-model="searchForm.contactNameFuzzy" clearable
                                    placeholder="支持模糊搜索" @keyup.enter.native="loadDataList"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4" :style="{ paddingLeft: '10px' }">
                            <el-button type="success" @click="loadDataList()">查询</el-button>
                            <el-button type="info" @click="reset()">重置</el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </el-card>
        </div>
        <el-card class="table-data-card">
            <template #header>
                <span>商家列表</span>
            </template>
            <Table ref="tableInfoRef" :columns="columns" :fetch="loadDataList" :dataSource="tableData"
                :options="tableOptions" :extHeight="tableOptions.extHeight" @row-click="handleRowClick">
                <template #operation="{ index, row }">
                    <div class="row-op-panel">
                        <a class="a-link" href="javascript:void(0)" @click="adminReview(row.email, 0)">通过</a>
                        <a class="a-link" href="javascript:void(0)" @click.prevent="adminReview(row.email, 1)">删除</a>
                    </div>
                </template>
            </Table>
        </el-card>
    </div>
</template>
<script setup>

import { getCurrentInstance, nextTick, ref } from 'vue';

const { proxy } = getCurrentInstance()

const userInfo = proxy.VueCookies.get("userInfo")

const searchForm = ref({})
const tableData = ref({})
const tableOptions = ref({
    extHeight: 125
})

const api = {
    // 获取商家列表
    loadDataList: '/admin/loadMerDataList',
    // 审核
    adminReview: '/admin/adminReview',
    // 删除商家
    deleteMer: '/admin/deleteMer',
}

const columns = [
    {
        label: "用户名",
        prop: "nickName",
    },
    {
        label: "店铺名称",
        prop: "storeName",
    },
    {
        label: "姓名",
        prop: "contactName",
    },
    {
        label: "手机",
        prop: "phone",
    },
    {
        label: "邮箱",
        prop: "email",
    },
    {
        label: "地址",
        prop: "address",
    },
    {
        label: "描述",
        prop: "description",
    },
    {
        label: "店铺状态",
        prop: "businessStatusName",
    },
    {
        label: "注册时间",
        prop: "createdAt",
    },
    {
        label: "最近更新",
        prop: "updatedAt",
    },
    {
        label: "账号状态",
        prop: "statusName",
    },
    {
        width: 150,
        label: "操作",
        scopedSlots: "operation"
    }
]

const loadDataList = async () => {
    let params = {
        pageNo: tableData.value.pageNo,
        pageSize: tableData.value.pageSize,
        reviewed: true,
    }

    Object.assign(params, searchForm.value)
    let result = await proxy.Request({
        url: api.loadDataList,
        params,
    })

    if (!result) {
        return
    }

    Object.assign(tableData.value, result.data)
}

const tableInfoRef = ref()

// 重置方法
const reset = () => {
    searchForm.value = {
        nickNameFuzzy: '',
        storeNameFuzzy: '',
        contactNameFuzzy: ''
    }
    loadDataList()
}


// 审核商家、删除 status: 0 审核 1 删除
const adminReview = async (value, status) => {
    let params = {
        email: value
    }
    let url = null
    let message = '';
    if (status === 0) {
        message = "确定审核通过吗？"
        url = api.adminReview
    } else {
        message = "确定要删除吗？"
        url = api.deleteMer
    }
    
    proxy.Confirm(message, async () => {
        let result = await proxy.Request({
            url,
            params,
        })
        if (!result) {
            return
        }

        if (result.code === 200) {
            proxy.$message.success("操作成功");
            loadDataList()
        }
    })
}
</script>

<style lang="scss" scoped>
.detail-tree-panel {
    height: calc(100vh - 273px);
    overflow: auto;
    width: 100%;
}
</style>